<template>
  <div>
    <div ref="header" class="header">
      <van-icon size="16px" name="arrow-left" @click="goback" />
      <div class="title">{{ title }}</div>
      <!-- <van-icon size="20px" name="share-o" @click="toast" /> -->
      <img src="@/assets/share.png" alt="" width="22px" @click="toast" />
    </div>
    <div class="swiperon">
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide
          v-for="(item, index) in housedata.house_images"
          :key="index"
        >
          <!-- <img :src="item" alt="" /> -->
          <div class="imgpart" :style="'background-image:url(' + item + ')'" />
        </swiper-slide>
        <div slot="pagination" class="swiper-pagination" />
      </swiper>
    </div>
    <div class="info">
      <div class="box1">
        <div
          class="housename"
          style="
            max-width: 68vw;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          "
        >
          {{ housedata.subdistrict }}
        </div>
        <div class="opentime">
          <div>开盘时间</div>
          <div>{{ housedata.openTime }}</div>
        </div>
      </div>
      <div class="title PV" v-if="uid">
        <img
          src="@/assets/eye.png"
          alt=""
          width="20px"
          style="margin-right: 4px"
        />{{ housedata.pv }}+
      </div>
      <div class="box2">
        <span
          v-for="item in housedata.houseLabel"
          :key="item.index"
          class="sort"
          >{{ item }}</span
        >
      </div>
      <div class="box3">
        <div class="price">
          <div v-show="housedata.sellingPrice != '0'">
            {{ housedata.sellingPrice }}元/m<span class="up">2</span>
          </div>
          <div v-show="housedata.sellingPrice == '0'">待定</div>
          <div>开盘价格</div>
        </div>
        <div v-show="housedata.plotRatio" class="housearea">
          <div v-show="housedata.plotRatio.length !== 1">
            {{ housedata.plotRatio }}
          </div>
          <div v-show="housedata.plotRatio.length === 1">
            {{ housedata.plotRatio }}.0
          </div>
          <div>容积率</div>
        </div>
        <div class="housetype">
          <div>{{ houseTypenum }}套</div>
          <div>户型</div>
        </div>
      </div>
    </div>
    <div class="timeaddress">
      <div>
        <img src="../../assets/housetip01.png" alt="" />
        <div>
          <div>开盘时间</div>
          <span>{{ housedata.openTime }}</span>
        </div>
      </div>
      <div>
        <img src="../../assets/housetip02.png" alt="" />
        <div>
          <div>项目地址</div>
          <span
            class="van-ellipsis"
            style="
              max-width: 92vw;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            "
            >{{ housedata.projectAddress }}</span
          >
        </div>
      </div>
    </div>
    <div class="tip">户型图介绍</div>
    <div class="housetypeimg">
      <div class="showimg">
        <div v-for="(item, index) in housedata.floorPlan" :key="item.index">
          <img :src="item" alt="" @click="showimg(index)" />
        </div>
        <!-- <div>
          <img src="../../assets/logo.png" alt="" />
          <div class="box1">2室1厅1卫</div>
          <div class="box2">75.77m<span class="up">2</span></div>
        </div>
        <div>
          <img src="../../assets/logo.png" alt="" />
          <div class="box1">3室1厅1卫</div>
          <div class="box2">95.77m<span class="up">2</span></div>
        </div>
        <div>
          <img src="../../assets/logo.png" alt="" />
          <div class="box1">4室1厅1卫</div>
          <div class="box2">115.77m<span class="up">2</span></div>
        </div>
        <div>
          <img src="../../assets/logo.png" alt="" />
          <div class="box1">5室1厅1卫</div>
          <div class="box2">140.77m<span class="up">2</span></div>
        </div> -->
      </div>
    </div>
    <div class="tip">周边配置</div>
    <div class="asideaddress">
      <div id="normal_map"></div>
      <van-tabs
        v-model="keywords"
        title-active-color="#45b7cb"
        title-inactive-color="#333"
        color="#45b7cb"
        @change="showaround"
      >
        <van-tab name="餐饮" title="餐饮">
          <div v-for="item in aroundinfo" :key="item" class="showouteq">
            <van-icon name="location-o" />{{ item }}
          </div>
        </van-tab>
        <van-tab name="地铁" title="交通">
          <div v-for="item in aroundinfo" :key="item" class="showouteq">
            <van-icon name="location-o" />{{ item }}
          </div>
        </van-tab>
        <van-tab name="购物" title="购物">
          <div v-for="item in aroundinfo" :key="item" class="showouteq">
            <van-icon name="location-o" />{{ item }}
          </div>
        </van-tab>
        <van-tab name="休闲" title="休闲">
          <div v-for="item in aroundinfo" :key="item" class="showouteq">
            <van-icon name="location-o" />{{ item }}
          </div>
        </van-tab>
        <van-tab name="学校" title="学校">
          <div v-for="item in aroundinfo" :key="item" class="showouteq">
            <van-icon name="location-o" />{{ item }}
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div class="tip">项目信息</div>
    <div class="houseinfo">
      <div class="line">
        <div class="titlepart">销售状态<span /></div>
        <div class="contentpart">{{ housedata.salesStatus }}</div>
      </div>
      <div class="line">
        <div class="titlepart">最新开盘<span /></div>
        <div class="contentpart" />
      </div>
      <div class="line">
        <div class="titlepart">交房时间<span /></div>
        <div class="contentpart">{{ housedata.completionDate }}</div>
      </div>
      <div class="line">
        <div class="titlepart">项目地址<span /></div>
        <div class="contentpart van-ellipsis">
          {{ housedata.projectAddress }}
        </div>
      </div>
      <div class="line">
        <div class="titlepart">参考价格<span /></div>
        <div v-show="housedata.sellingPrice != '0'" class="contentpart">
          {{ housedata.sellingPrice }}元/m<span class="up">2</span>
        </div>
        <div v-show="housedata.sellingPrice == '0'" class="contentpart">
          待定
        </div>
      </div>
      <div class="line">
        <div class="titlepart">在售户型<span /></div>
        <div class="contentpart">{{ housedata.houseType }}</div>
      </div>
      <div class="line">
        <div class="titlepart">建筑类型<span /></div>
        <div class="contentpart" />
      </div>
      <div class="line">
        <div class="titlepart">产权年限<span /></div>
        <div class="contentpart">
          {{ housedata.propertyTerm
          }}<span v-show="housedata.propertyTerm">年</span>
        </div>
      </div>
      <div class="line">
        <div class="titlepart">容积率<span /></div>
        <div class="contentpart">{{ housedata.plotRatio }}</div>
      </div>
      <div class="line">
        <div class="titlepart">绿化率<span /></div>
        <div class="contentpart">{{ housedata.greeningRate }}</div>
      </div>
      <div class="line">
        <div class="titlepart">规划住户<span /></div>
        <div class="contentpart">{{ housedata.planningUser }}</div>
      </div>
      <div class="line">
        <div class="titlepart">占地面积<span /></div>
        <div class="contentpart">
          {{ housedata.floorArea }}
        </div>
      </div>
      <div class="line">
        <div class="titlepart">建筑面积<span /></div>
        <div class="contentpart">
          {{ housedata.coveredArea }}
        </div>
      </div>
      <div class="line">
        <div class="titlepart">开发商<span /></div>
        <div class="contentpart">{{ housedata.developer }}</div>
      </div>
      <div class="line">
        <div class="titlepart">物业公司<span /></div>
        <div class="contentpart">{{ housedata.propertyCompany }}</div>
      </div>
      <div class="line">
        <div class="titlepart">车位比<span /></div>
        <div class="contentpart" />
      </div>
      <div class="line">
        <div class="titlepart">销售许可证<span /></div>
        <div class="contentpart">
          <span class="word">{{ housedata.saleCertificate }}</span>
        </div>
      </div>
      <div class="line">
        <div class="titlepart">发证时间<span /></div>
        <div class="contentpart">{{ housedata.saleCertificateTime }}</div>
      </div>
    </div>
    <div class="tipwords">*数据来源网络,以开发商公示价格为准</div>
    <div class="tip">
      您可能会喜欢<span><van-icon name="replay" />换一批</span>
    </div>
    <div class="maylike">
      <div v-show="samenewhouselist.length != 0" class="house">
        <img src="../../assets/logo.png" alt="" />
        <div class="intrduce">
          <span class="title1">subdistrict</span>
          <span class="title2">
            <span>70年</span>| <span>houseType</span>|
            <span>item.roomAcre</span>
          </span>
          <span class="tips">
            <span>官方认证</span>
            <span>金牌顾问</span>
            <span>别墅</span>
          </span>
          <span class="title3">128万<span>原价:140万</span></span>
        </div>
      </div>
      <div v-show="samenewhouselist.length == 0" class="nohouse">
        <img src="../../assets/nohouse.png" alt="" />
        <div>暂无推荐房源</div>
      </div>
    </div>
    <div class="tip">
      相似二手房<span @click="changebuyhouse"
        ><van-icon name="replay" />换一批</span
      >
    </div>
    <div class="maylike">
      <div v-show="samehouselist.length != 0">
        <div
          v-for="(item, index) in samehouselist"
          :key="index"
          @click="jumptobuydetail(item.houseId, item)"
        >
          <div v-show="item.subdistrict != housedata.subdistrict" class="house">
            <img :src="item.houseImage" />
            <div class="intrduce">
              <div class="title1">{{ item.subdistrict }}</div>
              <div class="title2">
                <span>{{ item.houseType }}</span
                >|<span>{{ item.coveredArea }}m<span class="up">2</span></span
                >|<span>{{ item.floor }}</span>
              </div>
              <div class="tips">
                <span v-show="item.aspectType">{{ item.aspectType }}</span>
                <span v-show="item.decoration">{{ item.decoration }}</span>
                <span v-show="item.houseGenre">{{ item.houseGenre }}</span>
              </div>
              <div v-show="item.listedPrice != '面议'" class="title3">
                {{ item.listedPrice }}万<span>
                  <span
                    >{{
                      ((item.listedPrice * 10000) / item.coveredArea).toFixed(2)
                    }} </span
                  >元/m<span class="up">2</span></span
                >
              </div>
              <div v-show="item.listedPrice == '面议'" class="title3">
                {{ item.listedPrice }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="samehouselist.length == 0" class="nohouse">
        <img src="../../assets/nohouse.png" alt="" />
        <div>暂无推荐房源</div>
      </div>
    </div>
    <div class="cut" />
    <div class="btnpart">
      <div class="btn">
        <div>
          <van-icon
            v-show="!collect"
            style="margin-right: 3px"
            name="star-o"
            color="#333"
            @click="change1"
            >关注</van-icon
          >
          <van-icon
            v-show="collect"
            color="#45a7cd"
            name="star"
            style="margin-right: 3px"
            @click="change2"
            >关注</van-icon
          >
        </div>
        <!-- <van-button class="cancelbtn" @click="jump">在线了解</van-button> -->
        <van-button @click="jump">加入团购</van-button>
      </div>
      <div class="safe" />
    </div>
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
    <van-overlay :show="show" class="zhe">
      <img src="@/assets/loudou.gif" alt="" width="50px" />
    </van-overlay>
  </div>
</template>

<script>
import { ImagePreview } from "vant";
import {
  getBuyhouselist,
  newHousedetail,
  collectBuyHouse,
  cancelcollectBuyHouse,
} from "@/apis/house";
import { getTianPeriphery } from "@/apis/map";
import { getNearby } from "@/apis/city";
import { _local } from "@/utils/storage";
import local from "@/utils/local";

import {
  getChooseCityQualify,
  getGeolocation,
  getChooseCity,
  getHouseListNew,
  setHouseListNew,
  getUserId,
  getRyId,
} from "@/utils/auth";
import { baseUtils } from "@/utils/baseUtils";
import { shareIntegral } from "@/apis/integral";
import { addLog } from "@/apis/user";

export default {
  data() {
    return {
      uid: "",
      time: 0,
      timer: "",
      show: true,
      ryId: "",
      city: "",
      cityCode: "",
      title: "",
      newHouseId: "",
      housedata: {
        plotRatio: "",
      },
      samenewhouselist: [],
      samehouselist: [],
      loading: false,
      currentPage: 1,
      perPage: 10,
      images: [],
      active: 0,
      loc: [],
      imgurl: "",
      showShare: false,
      collect: false,
      options: [[{ name: "微信", icon: "wechat" }]],
      center: [],
      center3: "",
      showmap: false,
      zoom: 14,
      markers: [],
      radius: 1000,
      keywords: "餐饮",
      aroundinfo: [],
      houseTypenum: 0,
      swiperOption: {
        slidesPerView: "auto",
        spaceBetween: 10,
        pagination: {
          el: ".swiper-pagination",
          type: "fraction",
        },
      },
    };
  },
  created() {
    //h5+功能接口需要调用此函数
    const _this = this;
    _this.$plusReady(() => {
      plus.share.getServices(function (e) {
        _this.shareData = e;
        for (var i in e) {
          if (e[i].id == "weixin") {
            _this.sharewx = e[i];
          }
        }
      });
    });
    // const chooseCityQualify = getChooseCityQualify();
    // if (!baseUtils.isEmpty(chooseCityQualify)) {
    //   _this.city = chooseCityQualify.city;
    //   _this.cityCode = chooseCityQualify.cityCode;
    // } else {
    //   const geolocation = getGeolocation();
    //   const chooseCity = getChooseCity();
    //   _this.city = chooseCity ? chooseCity.city : geolocation.city;
    //   _this.cityCode = chooseCity ? chooseCity.cityCode : geolocation.cityCode;
    // }

    // this.newhouseId = local.get('newhouseId')
    if (_local.get("cityCode")) {
      _this.cityCode = _local.get("cityCode");
    }
    _this.newHouseId = this.$route.query.newHouseId;
    _this.gethouseinfo();
    _this.getHouse();
  },
  mounted() {
    this.getTime();
    window.addEventListener("scroll", this.showScroll);
  },
  destroyed() {
    clearInterval(this.timer);
    this.getUserInfo();
    window.removeEventListener("scroll", this.showScroll);
  },
  methods: {
    getTime() {
      this.timer = setInterval(() => {
        this.time++;
      }, 1000);
    },
    getUserInfo() {
      addLog({
        adcode: _local.get("adCode"),
        code: "holding",
        page_name: "二手房详情页",
        system: _local.get("device"),
        uid: _local.get("ryId"),
        time: this.time,
        describe: `城市:${_local.get("city")},房源编号:${this.newHouseId}`,
      }).then((res) => {});
    },
    toast() {
      const userId = getUserId();
      if (userId) {
        this.showShare = true;
      } else {
        this.$router.push("/login");
      }
    },
    goback() {
      this.$router.go(-1);
    },
    showimg(index) {
      ImagePreview({
        images: this.housedata.floorPlan,
        loop: false,
        startPosition: index,
      });
    },
    jump() {
      const userId = getUserId();
      if (userId) {
        this.$store.dispatch("manage/getInfo", { userId: this.userId });
        if (_local.get("role") == 5) {
          fetch("https://api.nuanuan.net/house/join_group", {
            method: "POST",
            headers: {
              "Content-type":
                "application/x-www-form-urlencoded; charset=UTF-8",
              Authorization: "bearer " + _local.get("token"),
            },
            body: `house_id=${this.newHouseId}`,
          })
            .then((res) => res.json())
            .then((res) => {
              if (res.code == 200 || res.code == 201) {
                this.$dialog
                  .alert({
                    title: "温馨提示",
                    message:
                      "恭喜您，预约成功，可在个人中心服务订单里面查看进程。",
                    confirmButtonColor: "#45b7cb",
                    theme: "round-button",
                    messageAlign: "left",
                  })
                  .then(() => {});
              } else {
                this.$dialog
                  .alert({
                    title: "温馨提示",
                    message: "您已经预约过该房源，请等待后续通知！",
                    confirmButtonColor: "#45b7cb",
                    theme: "round-button",
                    messageAlign: "left",
                  })
                  .then(() => {});
              }
            });
        } else {
          this.$dialog
            .alert({
              title: "温馨提示",
              message: "请切换到买家身份预约",
              confirmButtonColor: "#45b7cb",
              theme: "round-button",
              messageAlign: "left",
            })
            .then(() => {});
        }
      } else {
        this.$router.push("/login");
      }
    },
    getHouse() {
      getBuyhouselist({
        citycode: this.cityCode,
        currentPage: this.currentPage,
        perPage: this.perPage,
      }).then((response) => {
        this.samehouselist = response.result.list;
        if (this.samehouselist.length === 10) {
          this.loading = true;
        }
      });
    },
    jumptobuydetail(e, item) {
      const list = getHouseListNew();
      for (let i = 0; i < list.length; i++) {
        if (list[i].houseId === item.houseId) {
          list.splice(i, 1);
        }
      }
      list.unshift(item);
      // local.set('todaybuyhouselist', JSON.stringify(list))
      setHouseListNew(list);

      this.$router.push({ path: "/buyhousedetail", query: { houseId: e } });
    },
    change1() {
      collectBuyHouse({
        houseId: this.newHouseId,
      }).then((res) => {
        console.log("关注", res);
        if (res.code == 200 || res.code == 201) {
          this.collect = true;
          this.$toast.success("关注成功");
        }
      });
    },
    change2() {
      cancelcollectBuyHouse({
        houseId: this.newHouseId,
      }).then((res) => {
        console.log("取消关注", res);
        if (res.code == 200 || res.code == 201) {
          this.collect = false;
          this.$toast.success("取消关注");
        }
      });
    },
    changebuyhouse() {
      if (this.loading) {
        this.currentPage++;
        getBuyhouselist({
          citycode: this.cityCode,
          currentPage: this.currentPage,
          perPage: this.perPage,
        }).then((response) => {
          if (response.result.list.length !== 10) {
            this.loading = false;
          }
          this.samehouselist = response.result.list;
        });
      } else {
        this.$toast("没有更多房源了");
      }
    },
    gethouseinfo() {
      const userId = getUserId();
      if (userId) {
        this.uid = local.get("ryId");
        console.log(this.uid);
      }
      newHousedetail({
        houseId: this.newHouseId,
        uid: this.uid,
      }).then((response) => {
        const code = response.code;
        if (code === 201) {
          console.log(response);
          this.show = false;
          this.housedata = response.result;
          this.houseTypenum = this.housedata.houseType.split(",").length;
          // this.ryId = response.result.ryId;
          this.center[0] = response.result.lng;
          this.center[1] = response.result.lat;
          this.center3 = this.center.join(",");
          this.showmap = true;
          if (response.result.collected === 2) {
            this.collect = true;
          }
          this.showaround();
        }
      });
    },
    showaround() {
      //初始化地图对象
      var map = new T.Map("normal_map");
      var lnglat = new T.LngLat(this.center[0], this.center[1]);
      map.centerAndZoom(lnglat, 10);
      map.enableDrag();
      getNearby({
        keyword: this.keywords,
        lon: this.center[0],
        lat: this.center[1],
      }).then((res) => {
        console.log("getTianPeriphery", res);
        this.aroundinfo = [];
        res.result.pois.forEach((item) => {
          const info = item.distance + " " + item.address + " " + item.name;
          this.aroundinfo.push(info);
          var lng = item.lonlat.split(",")[0];
          var lat = item.lonlat.split(",")[1];
          // 普通地图展示
          var point = new T.LngLat(lng, lat);
          var marker = new T.Marker(point); // 创建标注
          map.addOverLay(marker);
        });
      });
    },
    showScroll() {
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop > 120) {
        this.$refs.header.style.backgroundColor = "#fff";
        this.$refs.header.style.color = "#333";
        this.title = this.housedata.subdistrict;
      } else {
        this.$refs.header.style.color = "#fff";
        this.$refs.header.style.backgroundColor = "";
        this.title = "";
      }
    },
    shareGetIntegral() {
      const _this = this;
      shareIntegral({ type: 5 }).then((res) => {
        if (res.code === 200) {
          _this.$toast("分享成功，获得1积分");
        }
      });
    },
    onSelect(option) {
      const _this = this;
      _this.showShare = false;
      if (option.name === "微信") {
        if (_local.get("role") == 1) {
          var msg = {
            type: "web",
            title: "亲,这里有0中介费的直租好房！",
            content: `租房神器！房东直租没有中介费，价格比长租公寓便宜`,
            thumbs: ["https://image.nunbdc.net/image/152-152.png"],
            href: "https://html.nunbdc.net/share2.html",
            extra: { scene: "WXSceneSession" },
          };
        }
        if (_local.get("role") == 5) {
          var msg = {
            type: "web",
            title: "亲，这里有业主直卖房源！",
            content: `0中介费,价格和业主直接谈，省时省心更省钱！`,
            thumbs: ["https://image.nunbdc.net/image/152-152.png"],
            href: "https://html.nunbdc.net/maishare.html",
            extra: { scene: "WXSceneSession" },
          };
        }
        if (_local.get("role") == 2 || _local.get("role") == 3) {
          var msg = {
            type: "web",
            title: "亲,这里可以直卖直租0中介费！",
            content: `租客多、买家多、快速交易、快速变现！省时省心更赚钱`,
            thumbs: ["https://image.nunbdc.net/image/152-152.png"],
            href: "https://html.nunbdc.net/FangShare.html",
            extra: { scene: "WXSceneSession" },
          };
        }
        if (_local.get("role") == 4) {
          var msg = {
            type: "web",
            title: "兄弟，我在这里可以抢单抢红包！",
            content: `经纪人赚钱神器！全平台自由协作不分佣不扣佣，赚钱多结算快！`,
            thumbs: ["https://image.nunbdc.net/image/152-152.png"],
            href: "https://html.nunbdc.net/agent6.html",
            extra: { scene: "WXSceneSession" },
          };
        }
        _this.sharewx.send(
          msg,
          function () {
            if (_local.get("role") == 1 || _local.get("role") == 4) {
              _this.shareGetIntegral();
            }
            _this.$toast.success("分享成功");
          },
          function () {
            _this.$toast("分享失败");
          }
        );
      }
    },
  },
};
</script>

<style lang="less" scoped>
.PV {
  text-align: right;
  font-weight: normal !important;
  font-size: 12px !important;
  color: #ccc !important;
  img {
    vertical-align: middle;
  }
}
#normal_map {
  margin-top: 10px;
  width: 92vw;
  height: 48vw;
}
.zhe {
  background-color: #fff;
  width: 100vw;
  height: 100vh;
  z-index: 100000;
}
.van-overlay {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header {
  position: fixed;
  left: 0;
  top: 0;
  padding: 10px 15px;
  z-index: 1000;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font-size: 15px;
  color: #fff;
  img {
    background-color: #dddddd;
    opacity: 0.8;
    border-radius: 50%;
    box-sizing: border-box;
    padding: 2px;
    color: #333333;
    border: 1px solid white;
  }
  .van-icon {
    background-color: #dddddd;
    opacity: 0.8;
    border-radius: 50%;
    box-sizing: border-box;
    padding: 2px;
    color: #333333;
    border: 1px solid white;
  }
  .title {
    flex: 1;
    font-size: 19px;
    font-weight: bold;
    text-align: center;
  }
}
.swiperon {
  width: 100%;
  height: 200px;
  .imgpart {
    width: 100%;
    height: 250px;
    background-repeat: no-repeat;
    background-position-x: 0px;
    background-position-y: center;
    background-size: 100%;
  }
}
.info {
  margin: 50px 15px 0;
  .box1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    .housename {
      font-size: 25px;
      color: #333;
      font-weight: bold;
      position: relative;
      span {
        position: absolute;
        font-size: 12px;
        color: #fff;
        background-color: #45b7cb;
        width: 26px;
        padding: 1px 3px;
        border-radius: 10px;
        right: -32px;
        top: 0;
      }
    }
    .opentime {
      font-size: 12px;
      color: #333;
    }
  }
  .box2 {
    margin-bottom: 20px;
    .sort {
      display: inline-block;
      padding: 2px 7px;
      font-size: 12px;
      color: #45b7cb;
      border: 1px solid #45b7cb;
      margin: 1px;
    }
  }
  .box3 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    > div {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
    .price {
      text-align: center;
      div {
        &:first-child {
          color: #d43b33 !important;
          font-size: 18px;
          font-weight: bold;
          > span {
            color: #d43b33 !important;
          }
        }
        &:nth-child(2),
        &:last-child {
          font-size: 12px;
          color: #666;
        }
      }
    }
    .housearea,
    .housetype {
      font-weight: bold;
      color: #333;
      text-align: center;
      div {
        &:last-child {
          font-size: 14px;
          font-weight: normal;
        }
      }
    }
  }
}
.up {
  font-size: 9px;
  vertical-align: super;
  color: #333 !important;
}
.timeaddress {
  margin: 10px 15px;
  background-color: #ecf8fa;
  > div {
    display: flex;
    align-items: center;
    padding: 10px;
    img {
      width: 22px;
      height: 22px;
      margin-right: 5px;
    }
    div {
      font-size: 14px;
      color: #333;
      display: flex;
      align-items: center;
      overflow: hidden;
      > div {
        width: 60px;
      }
      span {
        display: inline-block;
        margin-left: 10px;
        flex: 1;
      }
    }
  }
}
.housetypeimg {
  margin: 10px 15px;
  .showimg {
    display: flex;
    width: 340px;
    overflow-x: scroll;
    > div {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #333;
      margin-right: 10px;
      padding: 10px 0;
      img {
        width: 110px;
        height: 110px;
      }
      .box1 {
        font-size: 14px;
        font-weight: bold;
      }
      .box2 {
        font-size: 13px;
      }
    }
  }
}
.asideaddress {
  margin: 20px 15px 0;
  /deep/ #content {
    margin: 10px auto 0;
    height: 200px;
    width: 100%;
    .amap-page-container {
      height: 200px;
    }
    .amap-demo {
      height: 100%;
    }
  }
  .showouteq {
    margin: 10px 15px;
    font-size: 12px;
    color: #333;
  }
}
.house {
  background-color: #fff;
  display: flex;
  padding: 10px 0;
  img {
    width: 130px;
    height: 120px;
    min-width: 130px;
    max-width: 130px;
    border-radius: 5px;
  }
  .intrduce {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
    width: 190px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    .title1 {
      font-size: 16px;
      font-weight: 550;
      color: #333333;
    }
    .title2 {
      font-size: 12px;
      color: #a0a0a0;
      span {
        margin: 0 2px;
      }
    }
    .tips {
      span {
        font-size: 10px;
        display: inline-block;
        margin-right: 5px;
        padding: 3px;
        border: 0;
        background-color: #7bc8db2f;
        color: #5eb9d0;
        border-radius: 5px;
      }
    }
    .title3 {
      color: #d43b33;
      font-size: 16px;
      font-weight: bold;
      span {
        font-size: 12px;
        margin-left: 3px;
        color: #333;
      }
    }
  }
}
.houseinfo {
  margin: 10px 15px;
  .line {
    display: flex;
    font-size: 14px;
    .titlepart {
      width: 85px;
      color: #666;
      margin-right: 10px;
      text-align: justify;
      height: 25px;
      span {
        display: inline-block;
        width: 100%;
        visibility: hidden;
      }
    }
    .contentpart {
      font-weight: bold;
      color: #333;
      width: 300px;
      .word {
        color: #45b7cb;
      }
    }
  }
}
.tip {
  font-weight: bold;
  margin: 20px 15px 10px;
  display: flex;
  justify-content: space-between;
  > span {
    font-size: 13px;
    color: #999;
    display: flex;
    align-items: center;
  }
}
.tipwords {
  margin: 0 15px;
  font-size: 12px;
  color: #333;
}
.maylike {
  margin: 10px 15px;
  .nohouse {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
      width: 150px;
    }
    div {
      font-size: 14px;
      color: #333;
      font-weight: bold;
      margin-top: 20px;
    }
  }
}
.cut {
  height: 70px;
}
.btnpart {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 15px;
  background-color: #fff;
  z-index: 10000;
  border: 2px solid rgba(220, 220, 220, 0.39);
  .btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    > div {
      font-size: 14px;
      color: #45b7cd;
    }
    .van-button {
      display: inline-block;
      font-size: 16px;
      color: #fff;
      background-image: linear-gradient(to bottom right, #6fccdd, #49b9cd);
      border-radius: 5px;
      border: none;
      padding: 0 30px;
      border-radius: 20px;
    }
    .cancelbtn {
      border: 1px solid #999;
      background-image: none;
      background-color: #fff;
      color: #999;
    }
  }
  .safe {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
</style>
